<!--
此组件初始化时不会自动加载数据，请在mounted中 this.$refs.[].initData()
如果放在dialog里面的吗，请在dialog的open事件中用this.$nextTick进行加载
 -->
<template>
    <div>
        <!-- 查询条件 -->
        <div style='margin-bottom: 2px' v-show='!hideQuery'>
            <div style='float:right;'>
                <el-button-group>
                    <el-button type='primary' icon="el-icon-search" @click='query'></el-button>
                    <el-tooltip content='重置查询条件' placement='top'>
                        <el-button icon="el-icon-refresh" @click='resetQuery'></el-button>
                    </el-tooltip>
                    <!-- <el-tooltip content='导出Excel' placement='top'>
                        <el-button @click='exportExcel' size='mini' icon='el-icon-download'></el-button>
                      </el-tooltip> -->
                </el-button-group>
            </div>
            <el-form ref='formQuery' :model='queryParams' class='c-form-condensed' label-width='68px' inline
                     size='mini'>
                <el-form-item label='姓名' prop='name'>
                    <el-input v-model='queryParams.username' clearable></el-input>
                </el-form-item>
                <el-form-item label='渠道ID' prop='remarks'>
                    <el-input v-model='queryParams.channel_id' clearable></el-input>
                </el-form-item>
                <div v-show='queryShowMore'>
                </div>
            </el-form>
        </div>
        <!--/ 查询条件 -->
        <!-- 数据表格 -->
        <el-table
                :data='list'
                ref='tableList'
                v-loading='loading'
                highlight-current-row
                border
                stripe
                row-key='id'
                :size='size'
                :max-height='maxHeight'
                @selection-change='selectionChange'
                :summary-method='getSummaryData'
                @sort-change='sortChange'>
            <el-table-column
                    fixed
                    v-if='showSelection'
                    type='selection'
                    align='center'
                    width='35'/>
            <el-table-column prop='username' label='姓名' min-width='120' show-overflow-tooltip/>
            <!--<el-table-column prop='phone' label='手机号' min-width='120' show-overflow-tooltip/>-->
            <el-table-column prop='channel_id' label='渠道ID' min-width='120' show-overflow-tooltip/>
            <el-table-column prop='channel_key' label='渠道KEY' min-width='120' show-overflow-tooltip/>
            <el-table-column prop='create_time' label='创建时间' min-width='120' show-overflow-tooltip/>
            <el-table-column prop='status' align='center' label='状态' width='80'>
                <template slot-scope='{row}'>
                    <el-tag type='success' v-if='row.status==`1`'>启用</el-tag>
                    <el-tag type='info' v-else>禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop='ip' label='ip' min-width='120' show-overflow-tooltip/>
            <!-- slot[column] -->
            <slot name='column'></slot>
            <!--/ slot[column]-->
        </el-table>
        <!-- 数据表格 -->
        <!-- 分页 -->
        <el-pagination style='margin-top: 10px'
                       v-if='!noPage'
                       :page-sizes="[10, 20, 50, 100]"
                       :page-size="requestParams.limit"
                       :current-page.sync="requestParams.page"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="dataTotal"
                       @size-change='sizeChange'
                       @current-change='getData'/>
        <!--/ 分页 -->
        <menu-dialog :in-dialog='inDialog' ref='menuDialog'/>
    </div>
</template>
<script>
    import api from '@/api/api/channel'
    import menuDialog from '@/components/sys/menu/treeDialog'

    export default {
        components: {menuDialog},
        props: {
            size: {
                type: String,
                default: ''
            },
            maxHeight: {
                default: 400
            },
            params: {
                default: () => ({})
            },
            inDialog: {
                type: Boolean,
                default: false
            },
            hideQuery: {
                type: Boolean,
                default: false
            },
            noPage: {
                type: Boolean,
                default: false
            },
            init: {
                type: Boolean,
                default: false
            },
            showMore: {
                type: Boolean,
                default: false
            },
            showSelection: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                inited: false,
                loading: false,
                dialogShow: false,
                list: [],
                dataTotal: 0,
                formLoading: false,
                projectList: [],
                summaryData: {},
                selectionList: [],
                queryShowMore: this.showMore,
                initParams: {},
                queryParamsLabel: {
                    dep_name: ''
                },
                //查询条件字段
                queryParams: {
                    no: '',//项目编号
                    invoice_date_begin: '',
                    invoice_date_end: ''
                },
                //数据请求的参数
                requestParams: {
                    limit: 10,//分页大小
                    page: 1,//当前页
                    sortProp: '',
                    sortOrder: '',
                    noPage: this.noPage ? 1 : 0
                }
            }
        },
        created() {

        },
        mounted() {
            if (this.init) {
                this.inited = true
                this.initData()
            }
        },
        methods: {
            //初始化数据
            initData(params = {}) {
                this.initParams = {...params}
                this.resetQuery()
            },
            //刷新数据
            reload() {
                this.getData()
            },
            //分页容量大小发生变化时
            sizeChange(value) {
                this.requestParams.pageSize = value
                this.getData()
            },
            selectionChange(valueArrary) {
                this.selectionList = valueArrary
            },
            getSummaryData({columns, data}) {
                let sum = []
                let labelIndex = this.showSelection ? 1 : 0
                columns.forEach((column, i) => {
                    if (i == labelIndex) {
                        sum[i] = '合计'
                    } else {
                        sum[i] = this.summaryData[column.property]
                    }
                })
                return sum
            },
            //获取数据
            getData() {
                this.loading = true
                api.getList({...this.requestParams, ...this.params, ...this.initParams}).then(res => {
                    this.list = res.data.list
                    this.dataTotal = res.data.page.total
                    this.summaryData = res.data.summary || {}
                    this.loading = false
                    this.$emit('loaded', {
                        total: this.dataTotal,
                        list: this.list,
                        params: {...this.queryParams}
                    })
                })
            },
            //查询方法
            query({key} = {}) {
                if (key) {
                    let value = this.queryParams[key]
                    this.requestParams = {...this.requestParams, [key]: value}
                } else {
                    this.requestParams = {...this.requestParams, ...this.queryParams}
                }
                this.getData()
            },
            //重置查询条件
            resetQuery() {
                this.$refs.formQuery.resetFields()
                // this.queryParamsLabel = { ...initQueryParamsLabel }
                // this.queryParams = {...this.queryParams,...this.params}
                this.requestParams.currentPage = 1
                this.query()
            },
            openDetails(row) {
                this.$refs.assetDetails.open().then(that => {
                    that.initData(row)
                })
            },
            sortChange({prop, order}) {
                this.requestParams.sortProp = prop
                this.requestParams.sortOrder = order
                this.getData()
            },
            //导出excel
            exportExcel() {
                api.exportExcel(this.requestParams)
            },
            clear() {
                this.list = []
            },
            del(row) {
                if (row.id == -1) {
                    this.$message.error('该角色为系统超级角色，禁止删除！')
                    return false
                }
                let confirmText = '确定删除此角色吗？'
                this.$confirm(confirmText, '提示', {
                    type: 'warning'
                }).then(() => {
                    api.del(row.id).then(res => {
                        this.reload()
                        this.$message.success('删除成功')
                        this.$emit('del')
                    })
                })
            },
            getMenuCount(menu_ids) {
                if (menu_ids) {
                    return menu_ids.split(',').length
                } else {
                    return 0
                }
            },
            openMenuDialog(row) {
                this.$refs.menuDialog.open().then(that => {
                    that.initData({ids: row.menu_ids, isIds: 1})
                })
            }
        }
    }
</script>
